<template>
  <div style="margin: auto"><h1>角色管理</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="同户名"
        width="600px">
    </el-table-column>
    <el-table-column
        label="操作"
        width="400px">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">删除角色</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findVisible=true">查看角色权限</el-button>
        <el-button type="primary" size="small" @click="updateFind(scope.row.id);this.roleId=scope.row.id">修改角色权限
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <el-button type="primary" @click="this.addVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加新角色
  </el-button>


  <!--  查看-->

  <el-dialog
      v-model="findVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<span style="margin-left: 50px">{{ this.roles.name }}</span>
    </div>
    <el-form-item label="拥有权限" prop="gradeShow">
      <el-tag
          style="margin: 2px 2px"
          v-for="grade in power"
          size="small">{{ grade.name }}
      </el-tag>
    </el-form-item>
    <el-button type="primary" @click="this.findVisible=false" style="margin-top: 30px;margin-left: 50px;size: 20px">确定
    </el-button>
  </el-dialog>

  <!--  修改-->

  <el-dialog
      v-model="updateVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<span style="margin-left: 50px">{{ this.roles.name }}</span>
    </div>
    <el-form-item label="拥有权限" prop="phone">
      <el-checkbox-group
          v-model="powerId"
      >
        <el-checkbox v-for="power in this.powerAll" :key="power.id" :label="power.id">
          {{
            power.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px">确定</el-button>
  </el-dialog>

  <el-dialog
      v-model="updateDiv"
      title=""
      width="20%"
      center>
    <h3>修改成功</h3>
    <el-button type="primary" @click="this.updateDiv=false;this.updateVisible=false;"
               style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>


  <!--  添加-->

  <el-dialog
      v-model="addVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<input type="text" v-model="this.addRole"></div>
    <el-form-item label="拥有权限" prop="phone">
      <el-checkbox-group
          v-model="powerId"
      >
        <el-checkbox v-for="power in this.powerAll" :key="power.id" :label="power.id">
          {{
            power.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 50px;size: 20px">确定</el-button>
  </el-dialog>

  <el-dialog
      v-model="addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false;this.addVisible=false;"
               style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>

  <!--  删除提示-->
  <el-dialog
      v-model="delDiv"
      title=""
      width="20%"
      center>
    <h3>删除成功</h3>
    <el-button type="primary" @click="this.delDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data() {
    return {
      cutObj: [],
      findObj: {},
      roles: {},
      power: [],
      findVisible: false,
      updateVisible: false,
      addVisible: false,
      powerAll: [],
      roleId: 0,
      powerId: [],
      updateDiv: false,
      addDiv: false,
      addRole: "",
      delDiv: false,
    }
  },
  methods: {
    findByItem(pageNo) {
      this.findObj.pageNo = pageNo;
      axios.get("/project/role/findByItem", {params: this.findObj}).then(resp => {
        this.cutObj = resp.data;
      })
    },
    del(roleId) {
      axios.get("/project/role/del", {
        params: {
          roleId
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.delDiv = true;
          this.findByItem(1);
        }
      })
    },
    findById(id) {
      axios.get("/project/role/findById", {
        params: {
          id
        }
      }).then(resp => {
        this.roles = resp.data;
        this.power = resp.data.grade;
      })
    },
    updateFind(id) {
      this.powerId = [];
      this.updateVisible = true;
      axios.get("/project/role/findById", {
        params: {
          id
        }
      }).then(resp => {
        this.roles = resp.data;
        resp.data.grade.forEach(n => {
          this.powerId.push(n.id);
        });
      })
    },
    findAll() {
      axios.get("/project/grade/findAll").then(resp => {
        this.powerAll = resp.data;
      })
    },
    update() {
      axios.get("/project/role/update", {
        params: {
          roleId: this.roleId,
          gradeId: this.powerId
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.updateDiv = true;

        }
      })
    },
    add() {
      axios.get("/project/role/add", {
        params: {
          name: this.addRole,
          powerId: this.powerId
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.addDiv = true;
          this.findByItem(1);
        }
      })
    }
  },
  created() {
    this.findByItem(1);
    this.findAll();
  }
}
</script>

<style scoped>

</style>